<template>
	<view class="register">
		
		<view class="item">
			<text class="required label">企业全称</text>
			<native_input @input="inputDelegator('componyName', $event)" placeholder="请输入企业全称" />
		</view>

		<view class="item">
			<text class="required label">统一社会信用代码</text>
			<native_input @input="inputDelegator('bizNo', $event)" placeholder="请输入统一社会信用代码" />
		</view>
		<view class="item">
			<text class="required label">注册资本</text>
			<native_input @input="inputDelegator('regFund', $event)" placeholder="请输入注册资本" />
			<text class="unit">(万元)</text>
		</view>
		<view class="item">
			<text class="required label">类型</text>
			<native_input @input="inputDelegator('companyType', $event)" placeholder="请输入企业类型" />
		</view>
		<view class="item">
			<text class="required label">成立日期</text>
			<view class="address" :class="hetongstartTime ? '':' placeholder'">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="selectStartDateView">
					{{ hetongstartTime ? hetongstartTime : '请选择开始日期'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>

			</view>
		</view>
		<view class="item">
			<text class="required label">法定代表人</text>
			<native_input @input="inputDelegator('legalPerson', $event)" placeholder="请输入法定代表人" />
		</view>
		<view class="item">
			<text class="required label">营业期限</text>
			<view class="dateBgView">
				<!-- <view class="startTime" @click="starTimeClick">{{startDate?startDate:'开始日期'}}</view> -->
				<view class="address" :class="OnStartTime ? '':' 开始日期'">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="selectStartDateView1">
						{{ OnStartTime ? OnStartTime : '开始日期'}}
					</picker>
				</view>
				<view class="line_"> —— </view>
				<!-- <view class="endTime" @click="endTimeClick">{{endDate?endDate:'结束日期'}}</view> -->
				<view class="address" :class="OnEndTime ? '':' 结束日期'">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="selectStartDateView2">
						{{ OnEndTime ? OnEndTime : '结束日期'}}
					</picker>

				</view>
			</view>
			<view class="agreenment1">
				<checkbox value="cb1" :checked="protocolFlag1" @click="checkBox1($event, item)" />
				长期
			</view>
		</view>
		<view class="item1">
			<text class="required label">*经营范围</text>
		</view>
		<view class="inputItem">
			<textarea class="inputField" type="textarea" value="" style="width: 95%; margin-left: 20rpx;"
			 placeholder-class="cl" placeholder-style="font-size:23rpx;color:#BBBBBB;" @input="inputDelegator('businessScope', $event)"
			 placeholder="请输入经营范围" />
		</view>

		<view class="item">
			<text class="required label">住所</text>
			<native_input @input="inputDelegator('companyAddress', $event)" placeholder="请输入住址" />
		</view>
		<view class="item1">
			<text class="required label">*公司简介</text>
		</view>
		<view class="inputItem">
			<textarea class="inputField" type="text" value="" style="width: 95%; margin-left: 20rpx;" placeholder-class="cl"
			 placeholder-style="font-size:23rpx;color:#BBBBBB;" @input="inputDelegator('companyProfile', $event)" placeholder="请输入公司简介" />
		</view>

		<view class="item">
			<text class="required label">联系人姓名</text>
			<native_input @input="inputDelegator('contractName', $event)" placeholder="请输入联系人姓名" />
		</view>
		<view class="item">
			<text class="required label">联系电话</text>
			<native_input @input="inputDelegator('phone', $event)" placeholder="该手机号将作为您的登录手机号" type="number" />
		</view>
		<view class="item">
			<text class="required label">联系地址</text>
			<view class="address" :class="area ? '':' placeholder'">
				<picker @columnchange="pickerChange" @change="selectArea" :value="[0,0,0]" mode="multiSelector" range-key="name"
				 :range="[provinceList, cityList, countryList]">
					{{ area ? area : '请选择联系地址'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>
			</view>
		</view>
		<view class="item　detailAddress">
			<native_input @input="inputDelegator('detailAddress', $event)" placeholder="请输入详细地址(必填)" />
		</view>
		<view class="item noborder">
			<text class="required label">营业执照</text>
			<Upload @updateURL="updateURL($event, 'ying_url')" tipText="营业执照示意图" :url='ying_url.imgUrl' example='/static/images/company/YingYeZhiZhao.png' />
			<view class="tip" v-if="!ying_url.imgUrl">请上传营业执照的清晰扫描件或照片，提交后不可更改。</view>
		</view>

		<view class="item noborder">
			<text class="required label">法人身份证</text>
			<Upload @updateURL="updateURL($event, 'shengFen_url')" tipText="身份证照示意图" :url='shengFen_url.imgUrl' example='/static/images/company/shenfenInside.png' />
			<view class="tip" v-if="!shengFen_url.imgUrl">请上传营法人身份证头像面，提交后不可更改。</view>
		</view>

		<view class="item noborder">
			<text class="required label">法人身份证</text>
			<Upload @updateURL="updateURL($event, 'shengFen_insideurl')" tipText="身份证照示意图" :url='shengFen_insideurl.imgUrl'
			 example='/static/images/company/shenfengoutSide.png' />
			<view class="tip" v-if="!shengFen_insideurl.imgUrl">请上传营法人身份证国徽面，提交后不可更改。</view>
		</view>

		<view class="item noborder">
			<text class="required label">开户许可证</text>
			<Upload @updateURL="updateURL($event, 'xu_url')" tipText="开户许可证示意图" :url='xu_url.imgUrl' example='/static/images/company/KaiHuXuKeZheng.png' />
			<view class="tip" v-if="!xu_url.imgUrl">请上传开户许可证的清晰扫描件或照片，提交后不可更改。</view>
		</view>
		<view class="item noborder">
			<text class="required label">一般纳税人证明</text>
			<Upload @updateURL="updateURL($event, 'na_url')" tipText="一般纳税人证明示意图" :url='na_url.imgUrl' example='/static/images/company/NaShuiRen.png' />
			<view class="tip" v-if="!na_url.imgUrl">请上传一般纳税人证明的清晰扫描件或照片，提交后不可更改。</view>
		</view>
		<view class="agreenment">
			<checkbox value="cb" @click="checkBox($event, item)" />我已阅读并同意
			<text class="navigate" @tap="goto('/pages/web-view/index', {url: 'https://request.zxlscm.com/service_protocol.html'})">《注册协议》</text>
		</view>
		<customButton classes="bigBt sure" @tap="submit">提交</customButton>
	</view>
</template>

<script>
	import native_input from '@/common/components/input/index.vue'
	import input_code from '@/common/components/input/input-code/index.vue'
	import customButton from '@/common/components/button/index.vue'
	import Upload from './upload/index.vue'
	export default {
		components: {
			native_input,
			customButton,
			input_code,
			Upload
		},
		data() {
			return {
				provinceList: [], // 省份对象
				cityList: [], // 市级对象
				countryList: [], // 县级对象
				phone: '',
				code: '',
				areaId: '',
				componyName: '',
				contractName: '',
				detailAddress: '',
				area: '',
				protocolFlag: '0', //协议勾选
				protocolFlag1: false, //长期勾选				
				ying_url: {
					imgUrl: ''
				}, // 已上传的营业执照地址
				shengFen_url: {
					imgUrl: ''
				}, //身份证正面
				shengFen_insideurl: {
					imgUrl: ''
				}, //身份证背面
				xu_url: {
					imgUrl: ''
				}, // 已上传的开户许可证地址
				na_url: {
					imgUrl: ''
				}, //{} // 已上传的一般纳税人证明地址
				clickNum: '0', //checkBox点击次数
				clickNum1: '0', //长期短期
				bizNo: '', //统一社会信用码
				regFund: '', //注册资本
				companyType: '', //类型
				regDate: '', //成立日期
				legalPerson: '', //法定代表人
				endDateType: '0', // 营业期限类型 0日期, 1长期
				startDate: '', //营业期限-开始日期
				endDate: '', //营业期限-结束日期
				businessScope: '', //经营范围
				companyAddress: '', //住所
				companyProfile: '', //公司简介
				hetongstartTime: '', //成立时间
				OnStartTime: '', //营业开始时间
				OnEndTime: '', //营业结束时间
			}
		},
		onLoad() {
			this.getPickerList()
		},
		methods: {
			selectStartDateView: function(e) {
				this.date = e.target.value
				this.hetongstartTime = e.target.value
				console.log('riqi=' + this.hetongstartTime)
			},
			selectStartDateView1: function(e) {
				this.date = e.target.value
				this.OnStartTime = e.target.value
			},
			selectStartDateView2: function(e) {
				this.date = e.target.value
				this.OnEndTime = e.target.value
				if(this.OnEndTime){
					this.protocolFlag1 = false
					this.endDateType = 0
				}
				console.log('riqi=' + this.OnEndTime)
			},
			submit() {
				console.log('点击了保存')
				console.log('xxxxx' + this.componyName)
				console.log('yyyyy' + this.contractName)
				console.log('nnnnn' + this.phone)
				console.log('fffff' + this.areaId)
				console.log('mmmmm' + this.detailAddress)
				console.log('mmmxxmm' + this.ying_url)
				console.log('hahahaa' + this.shengFen_url)
				console.log('nnnnnn' + this.shengFen_insideurl)
				console.log('xxxxxcccc' + this.xu_url)
				console.log('kkkkk' + this.na_url)
				if (this.componyName === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入公司名称！'
					})
					return;
				}
				if (this.bizNo === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入统一社会信用码！'
					})
					return;
				}
				if (this.regFund === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入注册资本！'
					})
					return;
				}
				if (this.companyType === '') {
					uni.showToast({
						icon: 'none',
						title: '请选择类型！'
					})
					return;
				}
				if (this.hetongstartTime === '') {
					uni.showToast({
						icon: 'none',
						title: '请选择成立日期'
					})
					return;
				}
				if (this.legalPerson === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入法人！'
					})
					return;
				}
				if (this.OnStartTime === '') {
					uni.showToast({
						icon: 'none',
						title: '请选择开始日期！'
					})
					return;
				}
				if (this.OnEndTime === '' && this.protocolFlag1 == false) {
					uni.showToast({
						icon: 'none',
						title: '请选择结束日期！'
					})
					return;
				}
				if (this.companyAddress === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入住所！'
					})
					return;
				}
				if (this.companyProfile === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入公司简介！'
					})
					return;
				}

				if (this.contractName === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人姓名！'
					})
					return;
				}
				if (this.phone === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码！'
					})
					return;
				}
				if (!/^[1](([3|5|8][\d])|([4][4,5,6,7,8,9])|([6][2,5,6,7])|([7][^9])|([9][1,8,9]))[\d]{8}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return;
				}
				if (this.areaId === '') {
					uni.showToast({
						icon: 'none',
						title: '请选择联系地址！'
					})
					return;
				}
				if (this.detailAddress === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入详细地址！'
					})
					return;
				}

				if (this.ying_url.imgUrl == '') { //				if (this.ying_url === '' ) {					
					uni.showToast({
						icon: 'none',
						title: '请上传营业执照！'
					})
					return;
				}
				if (this.shengFen_url.imgUrl == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面！'
					})
					return;
				}
				if (this.shengFen_insideurl.imgUrl == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证背面！'
					})
					return;
				}
				if (this.protocolFlag == '0') {
					uni.showToast({
						icon: 'none',
						title: '请勾选协议！'
					})
					return;
				}
				// if (this.xu_url.imgUrl === '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传开户许可证！'
				// 	})
				// 	return;
				// }
				// if (this.na_url.imgUrl === '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传一般纳税人图！'
				// 	})
				// 	return;
				// }
				this.http.POST({
					name: 'companyregisterUrl',
					params: {
						companyName: this.componyName,
						bizNo: this.bizNo, //统一社会信用码
						regFund: this.regFund, //注册资本
						companyType: this.companyType, //类型
						regDate: this.hetongstartTime, //成立日期
						legalPerson: this.legalPerson, //法定代表人
						endDateType: this.endDateType, // 营业期限类型 0日期, 1长期
						startDate: this.OnStartTime, //营业期限-开始日期
						endDate: this.OnEndTime, //营业期限-结束日期
						businessScope: this.businessScope, //经营范围
						companyAddress: this.companyAddress, //住所
						companyProfile: this.companyProfile, //公司简介
						areaId: this.areaId,
						address: this.detailAddress,
						mobilePhone: this.phone,
						contactName: this.contractName,
						businessImgUrl: this.ying_url.absoluteImgUrl,
						accountOpeningPermitImgUrl: this.xu_url.absoluteImgUrl,
						taxPeopleImgUrl: this.na_url.absoluteImgUrl,
						legalCardFrontImgURL: this.shengFen_url.absoluteImgUrl,
						legalCardReverseImgURL: this.shengFen_insideurl.absoluteImgUrl,

					},
					// header: {
					// 	'content-type': 'application/json',

					// }

				}).then(res => {
					if (res.result == 'success') {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
						uni.$emit('update', {}); // 地址列表更新数据
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			updateURL(url, key) {
				console.log(url, key)
				this[key] = url
			},
			inputDelegator(id, event) {
				if (event.target.value) {
					this[id] = event.target.value
				}
			},
			pickerChange(e) {
				if (e.target.column === 0) { // 改变省选择器
					this.getCityList(this.provinceList[e.target.value].id);
					this.cityList = [];
					this.countryList = [];
				}
				if (e.target.column === 1) { // 改变市选择器
					this.getCountryList(this.cityList[e.target.value].id);
					this.countryList = [];
				}
			},
			getPickerList(name) {
				this.http.GET({
					name: 'arealist',
					params: {
						parentId: ''
					},
					rejectLoadingip: true
				}).then(res => {
					this.provinceList = res.data.map(item => {
						return {
							id: item.id,
							name: item.name
						}
					});
					this.$forceUpdate();
					if (res.data.length) {
						this.getCityList(res.data[0].id, name)
					}
				})
			},
			getCityList(parentId, name) {
				this.http.GET({
					name: 'arealist',
					params: {
						parentId: parentId
					},
					rejectLoadingTip: true
				}).then(res => {
					this.cityList = res.data.map(item => {
						return {
							id: item.id,
							name: item.name
						}
					});
					this.$forceUpdate();
					if (res.data.length) {
						this.getCountryList(res.data[0].id, name)
					}
				})
			},
			getCountryList(parentId, name) {
				this.http.GET({
					name: 'arealist',
					params: {
						parentId: parentId
					},
					rejectLoadingTip: true
				}).then(res => {
					this.countryList = res.data.map(item => {
						return {
							id: item.id,
							name: item.name
						}
					});
					this.$forceUpdate();
				})
			},
			selectArea(e) {
				let provinceIndex = e.target.value[0];
				let cityIndex = e.target.value[1];
				let countryIndex = e.target.value[2];
				let province = this.provinceList[provinceIndex];
				let city = this.cityList[cityIndex];
				let country = this.countryList[countryIndex];
				console.log('1', this.area)
				this.area = (province ? province.name : '') + (city ? city.name : '') + (country ? country.name : '');
				console.log('2', this.area)
				// 匹配末级区划
				if (country) {
					this.areaId = country.id;
					return;
				}
				if (city) {
					this.areaId = city.id;
					return;
				}
				if (province) {
					this.areaId = province.id;
					return;
				}
			},
			checkBox(e) {
				this.clickNum++
				console.log('this.=' + this.clickNum)
				if (this.clickNum == '1' || this.clickNum == '3' || this.clickNum == '5' || this.clickNum ==
					'7' || this.clickNum == '9') {
					this.protocolFlag = '1'
					console.log('bbbb')
					console.log('this.protocolFlag=' + this.protocolFlag)


				} else {
					this.protocolFlag = '0'
					console.log('aaaa')
					console.log('aathis.protocolFlag=' + this.protocolFlag)

				}
			},
			checkBox1(e) {
				console.log('eeee=', e)
				this.protocolFlag1 = !this.protocolFlag1
				console.log('protocolFlag1=', this.protocolFlag1)
				if (this.protocolFlag1) {
					this.endDateType = 1
					this.OnEndTime = ''
				} else {
					this.endDateType = 0
				}
			}

		}
	}
</script>

<style>
	.register {
		background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		border-top: 1upx solid #DDDDDD;
	}

	.register .item {
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}

	.item.noborder {
		border: none
	}

	.item .label {
		font-size: 24upx;
	}

	.item .label::before {
		content: "*";
	}

	.item native_input {
		width: 70%;
		text-align: right;
	}

	.item input_code {
		width: 55%;
	}

	.item input_code .wrapper {
		border: none;
		padding: 0upx;
	}

	.item input_code .code {
		position: relative;
		width: auto;
		border: 1upx solid var(--theme-color);
		border-radius: 9999upx;
		padding: 10upx 20upx;
		white-space: nowrap;
	}

	.item input_code .code_retry {
		border: 1upx solid #BBBBBB;
		font-size: 25upx;
	}

	.item.detailAddress native_input {
		text-align: left;
		width: 100%;
	}

	.item .address {
		font-size: 24upx;
		color: #999999;
		margin-left: 12rpx;
	}

	.item .address.placeholder {
		color: #BBBBBB;
	}

	.item upload {
		width: 100%;
	}

	.item .tip {
		color: #999999;
		font-size: 24upx;
		width: 100%;
		text-align: center;
		padding: 20upx 0upx;
	}

	.register .agreenment {
		color: #999999;
		font-size: 24upx;
		margin-top: 21upx;
		margin-bottom: 80upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 25upx 30upx;
		position: relative;
		padding-left: 72upx;
	}

	.agreenment checkbox {
		position: absolute;
		transform: scale(0.5);
		left: 20upx;
	}

	.agreenment .navigate {
		color: var(--theme-color);
		font-size: 24upx;
	}

	.register .sure {
		border-radius: 0upx;
		/* position: fixed; */
		left: 0upx;
		right: 0upx;
		bottom: 0upx;
	}

	.item1 {
		font-size: 26rpx;
		margin-left: 30rpx;
		height: 53rpx;
		margin-top: 10rpx;
	}

	.inputItem {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 2rpx;
		border-radius: 10rpx;
		border: 2rpx solid #DDDDDD;
		height: 200rpx;
	}

	.agreenment1 {
		color: #999999;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		width: 54rpx;
	}

	.dateBgView {
		display: flex;
		border: 2rpx solid #DDDDDD;
		width: 438rpx;
	}

	.startTime {
		font-size: 24rpx;
		color: #333333;
		margin-left: 20rpx;
	}


	.line_ {
		font-size: 27rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		color: #999999;
	}

	.unit {
		font-size: 26rpx;
		color: red;
		font-weight: bold;
	}

	.endTime {
		margin-right: 20rpx;
		font-size: 24rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.agreenment1 checkbox {
		position: absolute;
		transform: scale(0.5);
		left: -50upx;
	}

	.inputField {
		width: 90%;
		margin-left: 8px;
		font-size: 26rpx;
		/* overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
		word-break: break-all */
		;
		margin-top: 5rpx;

	}
</style>
